<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
</head>
<style>

    h1, dl, dt, dd {
        margin: 0px;
        padding: 0px;
    }

    body {
        background-color: #D5D5D5;
    }

    #product {
        width: 230px;
        background-color: #fff;
        margin: 20px auto;
    }

    #product h1 {
        font-size: 16px;
        font-weight: bold;
        color: #FFF;
        background-color: #000;
        text-indent: 1em;
        line-height: 35px;
    }

    #product dt {
        padding-left: 27px;
        line-height: 35px;
        height: 35px;
        font-size: 14px;
        font-weight: bold;
    }

    #product dd {
        font-size: 12px;
        color: #666666;
        line-height: 20px;
        border-bottom: 1px #666666 dashed;
        padding-left: 27px;
    }

    #product dt:nth-of-type(1) {
        background: url(image/icon_01.gif) 0px 0px no-repeat;
    }

    #product dt:nth-of-type(2) {
        background: url(image/icon_02.gif) 0px 2px no-repeat;
    }

    #product dt:nth-of-type(3) {
        background: url(image/icon_03.gif) 0px 4px no-repeat;
    }

    #product dt:nth-of-type(4) {
        background: url(image/icon_04.gif) 0px 2px no-repeat;
    }

    #product dt:nth-of-type(5) {
        background: url(image/icon_05.gif) 0px 0px no-repeat;
    }

    #product dt:nth-of-type(6) {
        background: url(image/icon_06.gif) 0px 0px no-repeat;
    }

    #product dt:nth-of-type(7) {
        background: url(image/icon_07.gif) 0px 0px no-repeat;
    }

    #product dt:nth-of-type(8) {
        background: url(image/icon_08.gif) 0px 0px no-repeat;
    }

    #product dt:nth-of-type(9) {
        background: url(image/icon_09.gif) 0px 0px no-repeat;
    }

    #product dd:last-of-type {
        border-bottom: 0px;
    }
    .nav{
        width: 500px;
        margin: 0 auto;
    }
</style>
<body>
<div class="nav">
    <a href="index.html">作业一</a>
    <a href="demo.html">作业二</a>
    <a href="temp.html">作业三</a>
    <a href="test.html">作业四</a>
    <a href="iphoe.html">作业五</a>

    <div id="product">
        <h1>全部分类</h1>
        <dl>
            <dt>护肤</dt>
            <dd>洁面 化妆水 喷雾 美容液 眼霜<br/>
                眼部精华 眼膜 面膜 面膜贴<br/>
                水洗面膜 免洗面膜 精华 精油<br/>
                凝露 乳液 面霜 日霜 晚霜
            </dd>
            <dt>彩妆</dt>
            <dd>卸妆 防晒 隔离 BB霜 粉底 粉饼<br/>
                睫毛膏 眼影 唇彩 腮红 眼线笔<br/>
                底妆 遮瑕 蜜粉 眉笔 美甲
            </dd>
            <dt>香氛</dt>
            <dd>男香 女香 小Q装 中性香水</dd>

            <dt>身体护理</dt>
            <dd>洗发 护发 沐浴 身体乳 手足护理<br/>
                护手霜 纤体 身体精油 颈部护理<br/>
                个人护理 卫生用品 脱毛
            </dd>
            <dt>礼盒套装</dt>
            <dd>护肤套装 身体护理套装 彩妆套装 <br/>
                旅行装 香水套装 男士套装
            </dd>
            <dt>美容工具</dt>
            <dd>护肤 彩妆 美发 美体 美甲 <br/>
                美容仪器 其他美容工具
            </dd>
            <dt>母婴专区</dt>
            <dd>奶粉 尿裤湿巾 母婴洗护</dd>
            <dt>男士专区</dt>
            <dd>洁面 爽肤水 面霜 男香<br/>
                眼霜 凝胶 乳液 精华 沐浴
            </dd>
            <dt>食品保健</dt>
            <dd>瘦身类 保健类 美容类 食品类</dd>
        </dl>
    </div>
</div>
</body>
</html>
